<script setup>
import { ref, onMounted } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from 'element-plus';
import { setPaymentPin, getWalletInfo } from '@/api/payment';

const walletInfo = ref({
  balance: 0,
  status: ''
});

const pinForm = ref({
  oldPin: '',
  newPin: ''
});

const loading = ref(false);

const fetchWalletInfo = async () => {
  loading.value = true;
  try {
    const response = await getWalletInfo();
    walletInfo.value = response.data;
  } catch (error) {
    console.error('获取钱包信息失败:', error);
  } finally {
    loading.value = false;
  }
};

onMounted(fetchWalletInfo);

const updatePin = async () => {
  try {
    await setPaymentPin({
      oldPin: pinForm.value.oldPin,
      newPin: pinForm.value.newPin
    });
    ElMessage.success('支付密码更新成功');
    pinForm.value = { oldPin: '', newPin: '' };
  } catch (error) {
    ElMessage.error('更新支付密码失败');
  }
};
</script>

<template>
  <div class="wallet-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>钱包管理</h3>
        </div>
      </template>

      <div class="wallet-info">
        <div class="info-item">
          <span class="label">账户余额：</span>
          <span class="value">{{ walletInfo.balance }}</span>
        </div>
        <div class="info-item">
          <span class="label">钱包状态：</span>
          <span class="value">{{ walletInfo.status }}</span>
        </div>
      </div>

      <el-form label-width="120px" style="margin-top: 20px;">
        <el-form-item label="旧支付密码">
          <el-input v-model="pinForm.oldPin" type="password" placeholder="请输入旧支付密码" />
        </el-form-item>
        <el-form-item label="新支付密码">
          <el-input v-model="pinForm.newPin" type="password" placeholder="请输入新支付密码" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatePin">更新支付密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.wallet-container {
  padding: 20px;
}

.wallet-info {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;

  .info-item {
    display: flex;
    margin-bottom: 10px;

    .label {
      width: 120px;
      font-weight: bold;
    }
  }
}
</style>